<template>
  <view class="shop-list">
    <view class="title">推荐商家</view>
    <view class="shop-item" v-for="(item, index) in stores" :key="index">
      <image class="shop-image" :src="item.logo" mode="aspectFill"></image>
      <view class="shop-info">
        <view class="shop-name">{{item.name}}</view>
        <view class="shop-rating">
          <text class="rate">{{item.rating}}分</text>
          <text class="month-sales">月售{{item.monthSales}}单</text>
        </view>
        <view class="delivery-info">
          <text>起送¥{{item.minPrice}}</text>
          <text class="divider">|</text>
          <text>配送¥{{item.deliveryFee}}</text>
          <text class="divider">|</text>
          <text>{{item.deliveryTime}}分钟</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {useData} from "../../../common/useData";
const {modelData:stores}=useData("/store/list",{size:21})
</script>

<style>
.shop-list {
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.shop-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.shop-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.shop-info {
  flex: 1;
}
.shop-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.shop-rating {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 10rpx;
}
.rate {
  color: #ff6b6b;
  margin-right: 20rpx;
}
.delivery-info {
  font-size: 24rpx;
  color: #999;
}
.divider {
  margin: 0 10rpx;
}
</style>
